<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制立方体</title>
</head>

<body onload="main()">

    <canvas id="webGl" width="400" height="400">
        Please use a browser that supports 'canvas'
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="../lib/cuon-matrix.js"></script>

    <script>
        // 顶点着色器程序
        var VSHADER_SOURCE =
            'attribute vec4 a_Position;\n' +
            'attribute vec4 a_Color;\n' +
            'uniform mat4 u_MvpodelMatrix;\n' +
            'varying vec4 v_Color;\n' +
            'void main() {\n' +
            ' gl_Position = u_MvpodelMatrix * a_Position;\n' + // 设置坐标
            ' v_Color = a_Color;\n' +
            '}\n';
        // 片元着色器程序
        var FSHADER_SOURCE =
            '#ifdef GL_ES\n' +
            'precision mediump float;\n' +  // 精度声明
            '#endif\n' +
            'varying vec4 v_Color;\n' +
            'void main() {\n' +
            ' gl_FragColor = v_Color;\n' + // 设置颜色
            '}\n';

        function main() {

            var canvas = document.getElementById('webGl'),
                gl = getWebGLContext(canvas);

            if (!gl) {
                console.log('Failed to get the rending context for WebGL!');
                return;
            }

            // 初始化着色器
            if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
                console.log('Failed to initialize shaders.');
                return;
            }

            // 设置顶点位置与纹理坐标
            var n = initVertexBuffers(gl);
            if (n < 0) {
                console.log('Failed to set the positions of the vertices');
                return;
            }

            // 获取u_ModelMatrix、u_ViewMatrix、u_ProjMatrix变量的存储地址
            var u_MvpodelMatrix = gl.getUniformLocation(gl.program, 'u_MvpodelMatrix');

            var modelMatrix = new Matrix4(), // 模型矩阵
                viewMatrix = new Matrix4(), // 视图矩阵
                projMatrix = new Matrix4(), // 投影矩阵
                mvpMatrix = new Matrix4();  // 模型视图投影矩阵

            // 计算模型矩阵、视图矩阵和投影矩阵matrix
            modelMatrix.setTranslate(0.75, 0, 0); // 平移0.75单位
            viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
            projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);

            // 计算模型视图投影矩阵
            mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);

            // 将视图矩阵给u_MvpodelMatrix变量
            gl.uniformMatrix4fv(u_MvpodelMatrix, false, mvpMatrix.elements);

            gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置<canvas>的背景色
            gl.enable(gl.DEPTH_TEST);

            gl.clear(gl.COLOR_BUFFER_BIT);   // Clear <canvas>


            gl.drawArrays(gl.TRIANGLES, 0, n); // 绘制右侧一组三角形

            // 为另一侧的三角形重新计算模型矩阵
            modelMatrix.setTranslate(-0.75, 0, 0); // 平移0.75单位
            // 计算模型视图投影矩阵
            mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);

            gl.uniformMatrix4fv(u_MvpodelMatrix, false, mvpMatrix.elements);
            gl.drawArrays(gl.TRIANGLES, 0, n); // 绘制左侧一组三角形
        }

        function initVertexBuffers(gl) {

            var verticesColors = new Float32Array([
                // 右侧的三个三角形
                1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // V0
                -1.0, 1.0, 1.0, 1.0, 0.0, 1.0, // V1
                -1.0, -1.0, 1.0, 1.0, 0.0, 0.0, // V2
                1.0, -1.0, 1.0, 1.0, 1.0, 0.0, // V3
                1.0, -1.0, -1.0, 0.0, 1.0, 0.0, // V4
                1.0, 1.0, -1.0, 0.0, 1.0, 1.0, // V5
                -1.0, 1.0, -1.0, 0.0, 0.0, 1.0, // V6
                -1.0, -1.0, -1.0, 0.0, 0.0, 0.0 // V7
            ]);

            var indices = new Unit8Array([
                0, 1, 2, 0, 2, 3, // 前
                0, 3, 4, 0, 4, 5, // 右
                0, 5, 6, 0, 6, 1, // 上
                1, 6, 7, 1, 7, 2, // 左
                7, 4, 3, 7, 3, 2, // 下
                4, 7, 6, 4, 6, 5  // 后
            ]);

            var n = 8;//点的个数

            var FSIZE = verticesColors.BYTES_PER_ELEMENT;

            // 创建缓冲区对象
            var vertexColorBuffer = gl.createBuffer();

            if (!vertexColorBuffer) {
                console.log('Failed to create the buffer object');
                return -1;
            }

            // 将缓冲区对象绑定到目标
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);

            // 向缓冲区对象写入数据
            gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

            var a_Position = gl.getAttribLocation(gl.program, 'a_Position'),
                a_Color = gl.getAttribLocation(gl.program, 'a_Color');

            if (a_Position < 0 || a_Color < 0) {
                console.log('Failed to get the storage location of a_Position/a_Color');
                return -1;
            }

            // 将缓冲区对象分配给a_Position变量
            gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
            // 连接a_Position变量与分配给它的缓冲区对象
            gl.enableVertexAttribArray(a_Position);

            // 将缓冲区对象分配给a_TexCoord变量
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
            // 连接a_TexCoord变量与分配给它的缓冲区对象
            gl.enableVertexAttribArray(a_Color);

            return n;
        }
    </script>
</body>

</html>